import AutoComplete from "antd/es/auto-complete";
import Button from "antd/es/button";
import Checkbox from "antd/es/checkbox";
import Form from "antd/es/form";
import Input from "antd/es/input";
import { useContext, useState } from "react";
import Icon from "antd/lib/icon";

import styles from './userLogin.module.less';
import { MobXProviderContext } from "mobx-react";
import { Store } from "../../../store";

interface UserLoginProps {
  onTypeChange: Function;
};

function fakeFinger() {
  if (!localStorage.fakeFinger) {
    localStorage.fakeFinger = Math.random().toString(16);
  }
  return Promise.resolve(localStorage.fakeFinger);
}

const UserLogin = (props: UserLoginProps) => {
    const [loginLoading] = useState(false);
    const { userStore } = useContext<Store>(MobXProviderContext);

    const onSubmit = async (data: any) => {
      const serial = await fakeFinger();
      userStore.login({ ...data, serial });
    };

    const delRememberUser = (event, account: string) => {
        event.stopPropagation();
        // const data = this.props.form.getFieldsValue();
        // if (account === data.telephone) {
        //   this.props.form.setFieldsValue({
        //     telephone: "",
        //     password: "",
        //     remember: false,
        //   });
        // }
    
        // const list = JSON.parse(ipcRender.getGlobalItem(LOGIN_REMEMBER_LIST));
        // const newList = list.filter((item) => item.telephone !== account);
        // setItem(LOGIN_REMEMBER, JSON.stringify(newList));
        // const userList = newList.map((item) => item.telephone);
        // this.setState({
        //   userList,
        // });
    };

    // 切换用户给表单赋值
  const handlerChangeUser = (account: string) => {
    // const list = JSON.parse(ipcRender.getGlobalItem(LOGIN_REMEMBER_LIST));
    // const user = list.find((item) => item.telephone === account);
    // this.props.form.setFieldsValue({
    //   ...user,
    // });
  };

    const userList: any[] = [];

    const userOptions = userList.map((user) => (
        <AutoComplete.Option key={user} value={user} title={user} className="auto_user_input">
            <div className="user_name">{user}</div>
            <Icon type="close" className="user_del" onClick={(event) => delRememberUser(event, user)} />
        </AutoComplete.Option>
    ));

    return (
        <div className={styles.form_wraper}>
          <div className={styles.login_view_frame}>
            <div className={styles.title_ma} onClick={props?.onTypeChange}>
              <img src={require("@/assets/image/login-code.png")} alt="" className="qrco-img" />
            </div>
            <Form onFinish={onSubmit} className={styles.login_view} layout="vertical">
              <h1 className={styles.title}>
                {/* 只会有账号登录，手机号登录干掉了 */}
                {/* <RadioDouble titleOne={"手机号登录"} titleTwo={"账号登录"} preventDefault={this.changeForm} /> */}
              </h1>
              <Form.Item label="账号" name="telephone" rules={ [{ required: true, message: "请输入账号!" }]}>
                <AutoComplete optionLabelProp="value" onSelect={handlerChangeUser} dataSource={userOptions} />
              </Form.Item>
              <Form.Item label="密码" name="password" rules={[{ required: true, message: "请输入密码!" }]}>
                <Input.Password visibilityToggle={false}/>
              </Form.Item>

              <Form.Item name="remember">
                <div className={styles.edit_wrapper} >
                    <Checkbox>记住我</Checkbox>
                </div>
              </Form.Item>
              <Form.Item>
                <div className={styles.edit_wrapper} >
                  <Button type="primary" loading={loginLoading} htmlType="submit" className={styles.login_button}>
                    登录
                  </Button>
                </div>
              </Form.Item>
            </Form>

            {/* 检查更新，先暂时保留，感觉没必要，走electron的更新就好了，有点重复 */}
            {/* <ManualUpdate></ManualUpdate> */}
          </div>
        </div>
    )
};

export default UserLogin;